// pages/feedback/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 导航分类
    tabs:[
      {
        id:1,
        name:"体验问题",
        isActive:true
      },
      {
        id:2,
        name:"商家，商品投诉",
        isActive:false
      },
    ],
    // 上传图片存储
    chooseImgs:[],
    // 文本内容
    textval:"",
    // 外网的图片路径数组
    UpLoadImg:[]
  },


  // 根据标题索引来激活选中 标题数据
  changeTitleByIndex(index){
    // 修改原数组
    let {tabs} = this.data
    tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false);
    // 赋值
    this.setData({
      tabs
    })
 },


 handleTabsItemchange(e){
   console.log(e)
   // 1.获取点击的标题索引
   const {index} = e.detail
   // 2.激活标题样式
   this.changeTitleByIndex(index)
   // 3.重新发送请求  type=1 index=0
   // this.getOrders(index+1)
 },


// 点击+ 上传图片
 handleChooseImg(){
  //  调用微信小程序上传图片API 
  wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // tempFilePath可以作为img标签的src属性显示图片
      this.setData({
        // 图片数组 进行拼接 拼接数组
        chooseImgs:[...this.data.chooseImgs,...res.tempFilePaths]
      })
    }
  })
 },


// 点击小红叉移除图片 
 handleRemoveImg(e){
  //  获取上传图片的索引
  const {index} = e.currentTarget.dataset;
  // 获取data中的图片数组
  let {chooseImgs} =this.data
  // 删除元素
  chooseImgs.splice(index,1)
  // 重新赋值
  this.setData({
    chooseImgs
  })
 },

// 文本输入事件
 handleTextInput(e){
   this.setData({
    textval:e.detail.value
   })
 },


//  点击提交事件
handleContent(){
  // 获取文本内容 以及需要上传的图片
  const {chooseImgs,textval} = this.data
  // 合法性的验证 判断是不是为空
  if(!textval.trim()){
    // 不合法
    wx.showToast({
      title: '输入不合法',
      icon: 'none',
      image: '',
      duration: 1500,
      mask: true,
    });
    return;
  }
  // 准备上传图片 到专门的图片服务器 小程序自带
  // 上传文件的api 不支持 多个文件同时上传 只能遍历数组  挨个上传
  // 显示正在等待的图片
  wx.showLoading({
    title: "正在上传中",
    mask: true,
  });
  // 判断有没有需要上传的图片数组 
  if(chooseImgs.length !=0){
    // // 遍历
    // chooseImgs.forEach((v,i) =>{
    //   wx.uploadFile({
    //     // 图片上传到哪里
    //     url: 'http://www.qz777.com/xq/tuchuang.html',
    //     // 被上传的文件的路径
    //     filePath: v,
    //     // 上传的文件的名称 后台来获取文件  file
    //     name: "file",
    //     // 顺带的文本信息
    //     formData: {},
    //     success: (result)=>{
    //       console.log(result)
    //       let url = JSON.parse(result.data).url
    //       this.UpLoadImg.push(url)
    //       // 所有的图片都上传完毕才触发
    //       if(i===chooseImgs.length-1){
    //         // 关闭等待提示 
    //         wx.hideLoading();
    //         console.log("把文本的内容和外网的图片数组 提交到后台中")
    //         // 提交成功了
    //         // 重置页面
    //         this.setData({
    //           textval:"",
    //           chooseImgs:[]
    //         })
    //         // 返回上一个页面
    //         wx.navigateBack({
    //           delta: 1
    //         });
    //       }
    //     },
    //   });
    // })
    // 提交成功了 模拟演示
    wx.hideLoading();
    console.log("把文本的内容和外网的图片数组 提交到后台中")
    // 重置页面
    this.setData({
      textval:"",
      chooseImgs:[]
    })
    // 返回上一个页面
    wx.navigateBack({
      delta: 1
    });
  }else{
    wx.hideLoading();
    console.log("提交文本内容")
    // 重置页面
    this.setData({
      textval:"",
      chooseImgs:[]
    })
    wx.navigateBack({
      delta: 1
    });
  }
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})